<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>使用统计</title>

<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/css/datepicker3.css" rel="stylesheet"/>
<link href="/css/styles.css" rel="stylesheet"/>

<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->

</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#"><span>API</span>平台</a>
				<ul class="user-menu">
					<li class="dropdown pull-right">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> <a id="curUser"></a> <span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
							<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
							<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
						</ul>
					</li>
				</ul>
			</div>
							
		</div><!-- /.container-fluid -->
	</nav>
		
	<!--<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">-->
		<!--<form role="search">-->
			<!--<div class="form-group">-->
				<!--<img alt="100x100" src="/images/pc_10360.jpg" />-->
			<!--</div>-->
		<!--</form>-->
		<!--<ul class="nav menu">-->
			<!--<li><a href="add"><span class="glyphicon glyphicon-dashboard"></span> 数据源定义</a></li>-->
			<!--<li><a href="index"><span class="glyphicon glyphicon-pencil"></span> 联调平台</a></li>-->
			<!--<li class="active"><a href="charts"><span class="glyphicon glyphicon-stats"></span> 调用统计</a></li>-->
			<!--<li><a href="usermanage"><span class="glyphicon glyphicon-list-alt"></span> 用户管理</a></li>-->
			<!--<li><a href="table"><span class="glyphicon glyphicon-th"></span> 参数配置</a></li>-->
		<!--</ul>-->
		<!--<div class="attribution">Template by <a href="http://www.medialoot.com/item/lumino-admin-bootstrap-template/">Medialoot</a></div>-->
	<!--</div>&lt;!&ndash;/.sidebar&ndash;&gt;-->

	<div class="col-sm-11 col-sm-offset-1 col-lg-11 col-lg-offset-1 main">
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">调用统计</li>
			</ol>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">数据统计</h1>
				
			</div>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">使用量一周统计</div>
					<div class="panel-body">
						<div class="canvas-wrapper">
							<canvas class="main-chart" id="line-chart" height="200" width="600"></canvas>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">数据源数量变化</div>
					<div class="panel-body">
						<div class="canvas-wrapper">
							<canvas class="main-chart" id="bar-chart" height="200" width="600"></canvas>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.row-->		
		
		<div class="row">
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">数据源使用详情</div>
					<div class="panel-body">
						<div class="canvas-wrapper">
							<canvas class="chart" id="pie-chart" ></canvas>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel panel-default">
					<div class="panel-heading">数据源类型详情</div>
					<div class="panel-body">
						<div class="canvas-wrapper">
							<canvas class="chart" id="doughnut-chart" ></canvas>
						</div>
					</div>
				</div>
			</div>
		</div><!--/.row-->
		
		<!--<div class="row">-->
			<!--<div class="col-xs-6 col-md-3">-->
				<!--<div class="panel panel-default">-->
					<!--<div class="panel-body easypiechart-panel">-->
						<!--<h4>Label:</h4>-->
						<!--<div class="easypiechart" id="easypiechart-blue" data-percent="92" ><span class="percent">92%</span>-->
						<!--</div>-->
					<!--</div>-->
				<!--</div>-->
			<!--</div>-->
			<!--<div class="col-xs-6 col-md-3">-->
				<!--<div class="panel panel-default">-->
					<!--<div class="panel-body easypiechart-panel">-->
						<!--<h4>Label:</h4>-->
						<!--<div class="easypiechart" id="easypiechart-orange" data-percent="65" ><span class="percent">65%</span>-->
						<!--</div>-->
					<!--</div>-->
				<!--</div>-->
			<!--</div>-->
			<!--<div class="col-xs-6 col-md-3">-->
				<!--<div class="panel panel-default">-->
					<!--<div class="panel-body easypiechart-panel">-->
						<!--<h4>Label:</h4>-->
						<!--<div class="easypiechart" id="easypiechart-teal" data-percent="56" ><span class="percent">56%</span>-->
						<!--</div>-->
					<!--</div>-->
				<!--</div>-->
			<!--</div>-->
			<!--<div class="col-xs-6 col-md-3">-->
				<!--<div class="panel panel-default">-->
					<!--<div class="panel-body easypiechart-panel">-->
						<!--<h4>Label:</h4>-->
						<!--<div class="easypiechart" id="easypiechart-red" data-percent="27" ><span class="percent">27%</span>-->
						<!--</div>-->
					<!--</div>-->
				<!--</div>-->
			<!--</div>-->
		<!--</div>&lt;!&ndash;/.row&ndash;&gt;-->
											
	</div>	<!--/.main-->
	  

	<script src="/js/jquery-1.11.1.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/chart.min.js"></script>
	<script src="/js/chart-data.js"></script>
	<script src="/js/easypiechart.js"></script>
	<script src="/js/easypiechart-data.js"></script>
	<script src="/js/bootstrap-datepicker.js"></script>
	<!--<script>-->
		<!--!function ($) {-->
		    <!--$(document).on("click","ul.nav li.parent > a > span.icon", function(){          -->
		        <!--$(this).find('em:first').toggleClass("glyphicon-minus");      -->
		    <!--}); -->
		    <!--$(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");-->
		<!--}(window.jQuery);-->

		<!--$(window).on('resize', function () {-->
		  <!--if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')-->
		<!--})-->
		<!--$(window).on('resize', function () {-->
		  <!--if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')-->
		<!--})-->
	<!--</script>	-->
</body>

</html>
